import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Layout, Fixed } from 'react-layout-pane'
import { projectLabelView as projectDuck } from 'ducks'
import Ribbon from './ribbon'
import GetLabels from './fetchItemLabels'

class mainView extends Component {
  componentDidMount() {
    const { match, actionSetActiveItemId } = this.props
    const { id } = match.params
    actionSetActiveItemId(id)
  }

  render() {
    const { pid, activeItemId, lableState } = this.props
    if (activeItemId) {
      return <GetLabels pid={pid} lableState={lableState} />
    }
    return <div />
  }
}

const mapStateToProps = state => ({
  activeItemId: projectDuck.selectors.activeItemId(state),
})

const mapDispatchToProps = {
  actionSetActiveItemId: projectDuck.creators.actionSetActiveItemId,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(mainView)
